<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 20px">
        <el-breadcrumb-item :to="{ path: '/' }">员工页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <hr />
    </div>

    <div>
      <el-input
        v-model="search"
        size="mini"
        placeholder="输入关键字搜索"
        style="margin-top: 20px"
      >
      </el-input>

      <el-button type="primary" icon="el-icon-search" size="mini"></el-button>
    </div>
    <div>
      <el-button
        @click="add"
        icon="el-icon-plus"
        type="primary"
        style="margin: 10px 20px 5px"
        >新增员工</el-button
      >
    </div>
    <div>
      <el-table
        border
        :data="tableData"
        style="width: 100%; margin: 20px"
      >
        <el-table-column label="ID" prop="id" width="100"> </el-table-column>

        <el-table-column label="姓名" prop="name" width="80"> </el-table-column>

        <el-table-column label="性别" prop="gender" width="60">
        </el-table-column>

        <el-table-column label="出生日期" prop="birth" width="80">
        </el-table-column>

        <el-table-column label="职位" prop="position" width="80"> </el-table-column>

        <el-table-column label="身份证号码" prop="ID_number"> </el-table-column>

        <el-table-column label="电话号码" prop="phone"> </el-table-column>

        <el-table-column label="地址" prop="address"> </el-table-column>

        <el-table-column label="紧急联系人" prop="emergency_contact">
        </el-table-column>

        <el-table-column label="紧急联系人电话" prop="Emergency_Contact_Number">
        </el-table-column>

        <el-table-column label="入职日期" prop="hiredate"> </el-table-column>

        <el-table-column label="离职日期 " prop="resignation_time">
        </el-table-column>

        <el-table-column align="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              style="width: 80px"
              type="primary"
              plain
              >编辑</el-button
            >

            <el-button
              style="width: 80px"
              size="mini"
              type="primary"
              @click="dialogTableVisible = true"
              >查看信息</el-button
            >

            <el-dialog
              style="line-height: 60px"
              title="员工信息"
              :visible.sync="dialogTableVisible"
            >
              <el-table :data="gridData">
                <el-table-column
                  property="date"
                  label="日期"
                  width="150"
                ></el-table-column>
                <el-table-column
                  property="name"
                  label="姓名"
                  width="200"
                ></el-table-column>
                <el-table-column
                  property="address"
                  label="地址"
                ></el-table-column>
                <el-table-column
                  property="birth"
                  label="出生日期"
                ></el-table-column>
                <el-table-column property="post" label="职位"></el-table-column>
                <el-table-column
                  property="ID_number"
                  label="身份证号码"
                ></el-table-column>
                <el-table-column
                  property="phone"
                  label="电话号码"
                ></el-table-column>
                <el-table-column
                  property="emergency_contact"
                  label="紧急联系人"
                ></el-table-column>

                <el-table-column
                  property="hiredate"
                  label="入职日期"
                ></el-table-column>

                <el-table-column
                  property="resignation_time"
                  label="离职日期"
                ></el-table-column>

              </el-table>
            </el-dialog>

            <el-button
              style="width: 80px"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="goPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: [
        // {
        //   date: "2016-05-02",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // },
        // {
        //   date: "2016-05-04",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // },
        // {
        //   date: "2016-05-01",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // },
        // {
        //   date: "2016-05-03",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // },
      ],
      dialogTableVisible: false,

      pageSize: 10,
      total: 100,
      page: 1,

      value: "",

      tableData: [
        {
          // birth: "1997-12-17",
          // id: "123456",
          // hiredate: "2012-6-09",
          // name: "张三",
          // age: "24",
          // gender: "男",
          // address: "北京市",
          // position: "经理",
          // ID_number: "1245213655225556",
          // phone: "12345678910",
          // emergency_contact: "李四",
          // Emergency_Contact_Number: "321546798745",
          // resignation_time: "2021-6-10",
        },
      ],
      search: "",
      formLabelWidth: "120px",
    };
  },
  created() {
    this.$http({
      url: "/employee/getAll",
      method: "get",
      params: this.tableData,
    }).then((res) => {
      console.log(res);
      this.tableData = res.data;
    });
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({
        path: "/employee/update",
        query: {},
      });
    },

    handleDelete(index, row) {
      this.$confirm(`确定要删除${index.row}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      console.log(index, row);
    },
    examine(index, row) {
      console.log(index, row);
    },
    goPage(page) {
      console.log(page);
      this.page = page;
    },
    add() {
      this.$router.push({
        path: "/employee/add",
        query: {},
      });
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 200px;
  margin: 0 15px;
}
</style>